<template>
	<view>
		<view class="user-form-box">
			<tn-form :model="userModelForm" ref="userForm" :labelWidth="230">
				<tn-form-item label=" 今日体重(kg)" prop="weight" :required="true">
					<tn-input v-model="userModelForm.weight" type="number" placeholder="请输入今日体重" :border="border" />
				</tn-form-item>


				<tn-form-item label="今日身高(厘米)" prop="height" :required="true">
					<tn-input v-model="userModelForm.height" type="number" placeholder="请输入今日身高" :border="border" />
				</tn-form-item>


				<tn-form-item label="体脂" prop="body_fat">
					<tn-input v-model="userModelForm.body_fat" type="number" placeholder="请输入今日体脂" :border="border" />
				</tn-form-item>


				<tn-form-item label="睡眠时间" prop="sleep_time">
					<tn-input v-model="userModelForm.sleep_time" type="number" placeholder="请输入睡眠时间(小时)" :border="border" />
				</tn-form-item>


				<tn-form-item label="运动步数" prop="step_count" :required="true">
					<tn-input v-model="userModelForm.step_count" type="number" placeholder="请输入运动步数" :border="border" />
				</tn-form-item>


				<tn-form-item label="血压" prop="blood_pressure">
					<tn-input v-model="userModelForm.blood_pressure" placeholder="请输入血压(收缩压,舒张压),以逗号隔开" :border="border" />
				</tn-form-item>


				<tn-form-item label="血氧" prop="blood_oxygen">
					<tn-input v-model="userModelForm.blood_oxygen" type="number" placeholder="请输入血氧" :border="border" />
				</tn-form-item>


				<tn-form-item label="平均心率" prop="average_heart_rate">
					<tn-input v-model="userModelForm.average_heart_rate" type="number" placeholder="请输入平均心率(次/分钟)" :border="border" />
				</tn-form-item>


				<tn-form-item label="体温(℃)" prop="average_temperature">
					<tn-input v-model="userModelForm.average_temperature" type="number" placeholder="请输入体温(℃)(无需带℃)" :border="border" />
				</tn-form-item>


				<tn-form-item label="今日感言" prop="checkin_note" :required="true">
					<tn-input v-model="userModelForm.checkin_note" type="textarea" placeholder="请输入介绍" :border="border" />
				</tn-form-item>


				<tn-form-item label="晒照" prop="images" :required="true">
					<tn-image-upload :fileList="fileList" action="https://open.web.jinrijiesuan.cn/snm/upload" :width="100" :height="100"
						:maxSize="5 * 1024 * 1024" :beforeUpload="beforeUpload" @on-list-change="imageUploadChange" @on-success="onImageUploadSuccess"
						:multiple="false" uploadText="" />
				</tn-form-item>
			</tn-form>
		</view>


		<view class="fixed-bottom">
			<tn-button backgroundColor="#0ab99c" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
		</view>
	</view>
</template>

<script>
	import dynamicDemoTemplate from "@/libs/components/dynamic-demo-template.vue";
	import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
	import NavIndexButton from "@/libs/components/nav-index-button.vue";
	export default {
		data() {
			return {
				userModelForm: {
					mid: '', // 用户id
					weight: '', //体重（两位小数）
					height: '', //身高（厘米）
					body_fat: '', //体脂（%），直接填数字，两位小数
					sleep_time: '', //睡眠时间
					step_count: '', // 运动步数
					blood_pressure: '', // 血压 (例:110,110)
					blood_oxygen: '', // 血氧
					average_heart_rate: '', //平均心率(次/分钟)
					average_temperature: '', //平均体温(℃)
					checkin_note: '', // 备注
					images: '', // 图片 (例:'a.jpg,b.jpg')
				},
				border: false,
				fileList: [],
				rules: {
					weight: [{
							required: true,
							message: '请输入今日体重',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								console.log(this.$tn.test);
								if (value < 30) {
									callback(Error('最低不能低于30kg'))
								} else {
									callback()
								}
							},
							trigger: ['change', 'blur']
						}
					],

					height: [{
							required: true,
							message: '请填写今日身高',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (value > 230 || value < 130) {
									callback(Error('请填写真实身高'))
								} else {
									callback()
								}
							},
							trigger: ['change', 'blur']
						}
					],

					step_count: [{
							required: true,
							message: '请填写今日步数',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (value < 10) {
									callback(Error('请填写真实运动步数'))
								} else {
									callback()
								}
							},
							trigger: ['change', 'blur']
						}
					],

					blood_pressure: [{
						validator: (rule, value, callback) => {
							// 这是判断
							// console.log(value.startsWith(","));
							// console.log(value.endsWith(","));
							// if (value.startsWith(",") || value.endsWith(",")) {
							// 	callback(Error('逗号不能在开头或结尾'))
							// } else if (value.includes(",")) {
							// 	callback();
							// } else {
							// 	callback(Error('请填写逗号分割'))
							// }

							// 这是正则表达(当然是正则更好更简洁)
							const isValid = /^[^,]+,[^,]+$/.test(value);
							console.log(isValid);
							if (value.length == '') {
								callback()
							} else {
								if (isValid) {
									callback()
								} else {
									callback(Error('请使用一个逗号分割，且逗号不能在开头或结尾'))
								}
							}

						},
						trigger: ['change', 'blur']
					}],

					checkin_note: {
						required: true,
						message: '不能为空',
						trigger: ['change', 'blur']
					},

					images: {
						required: true,
						message: '请选择照片',
						trigger: ['change', 'blur'],
					}
				}
			}
		},


		onLoad(option) {
			this.getMid(option)
		},




		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.userForm.setRules(this.rules);
		},
		methods: {

			// 获取mid
			getMid(option) {
				this.userModelForm.mid = option.mid
			},


			// 上传文件前钩子函数	
			beforeUpload(index, lists) {
				console.log(index, lists, '------------');
			},

			imageUploadChange(lists) {
				// this.fileList = lists
				console.log(lists, this.fileList, '2222222222');
			},

			// 上传成功时的调的接口
			onImageUploadSuccess(data, index, lists, name) {
				// console.log(data, index, lists, name, '1212121212');

				// 这个图鸟不能push他会直接显示两遍
				// this.fileList.push({
				// 	url: data.data.fullpath,
				// })

				// 更新images字段，将新图片URL追加到现有值后面
				if (this.userModelForm.images) {
					// 如果已有图片，用逗号分隔追加新图片
					this.userModelForm.images += ',' + data.data.fullpath;
				} else {
					// 如果是第一张图片，直接赋值
					this.userModelForm.images = data.data.fullpath;
				}
			},


			// 提交
			async submit() {
				let that = this
				let valid = await this.$refs.userForm.validate()
				if (valid) {
					uni.showModal({
						title: '温馨提示',
						content: '确定提交吗',
						success(res) {
							if (res.confirm) {
								that.postSignData()
							}
						}
					})
				}
			},

			// 提交请求
			async postSignData() {
				let that = this
				await uni.request({
					url: 'https://open.web.jinrijiesuan.cn/snm/dailysignin',
					method: 'POST',
					data: that.userModelForm,

					success(res) {
						console.log(res);
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/index/index?mid=${that.userModelForm.mid}`
								})
							}, 2000)

						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-form-box {
		padding: 30rpx 40rpx 160rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 15px;
		background-color: #fff;
		box-shadow: 0 -10rpx 10px rgba(0, 0, 0, 0.5);
	}
</style>